<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="lib :: common_header"></head>
<body>
<div th:replace="lib :: header_box"></div>
<div th:replace="lib :: menu_box (3)"></div>

<div class="main-box" v-model="project_org">
    <div class="main-container">
        <!-- 面包屑导航 -->
        <div class="row main-container-header">
            <div class="col-md-12 rel">
                <div class="main-container-header-line fix">
                    <div class="row">
                        <div class="col-xs-6 col-md-6"> <h4 class="g4"> <a class="a-back" href="javascript:history.go(-1)"><em class="el-icon-arrow-left"></em>
                            <em th:text="项目会员"></em>
                        </a></h4></div>
                        <div class="col-xs-6 col-md-6 tr f12">
                            <div class="bread-link-box">
                                当前位置：<a th:href="@{/console/project}">项目管理</a>
                                &nbsp;&gt;&nbsp;
                                <em th:text="项目会员"></em>
                            </div><!-- /bread-link-box -->
                        </div>
                    </div><!-- /row -->
                </div><!-- main-container-header-line -->
            </div>
        </div><!-- /main-container-header -->

        <div class="f14" id="app" v-cloak>
            <br>
            <el-card shadow="hover" class="rel">
                <p> 项目名称：<span class="red b">{{ project.name }}</span> </p>
                <p> 项目类型：{{ project.type | changeProjectType }} <el-divider direction="vertical"></el-divider> 当前状态：{{ project.status | changeProjectStatus }} </p>
                <p style="margin-bottom:0;"> 创建日期：{{ project.createdate }} <el-divider direction="vertical"></el-divider> 概要说明：{{ project.rcontext }} </p>
                <img class="abs" th:src="@{/images/sa5.jpg}" height="100" style="right:0; top:8px;">
            </el-card><!-- /row -->
            <br>

            <el-card shadow="hover">
                <div class="mt10">
                    <table class="m_srchList">
                        <tr style="border:0;">
                            <td class="imgtd" width="50" style="padding-top:0;">
                                <el-checkbox @change="checkAll"
                                             v-model="allCheck"></el-checkbox>
                            </td>
                            <td colspan="3" style="padding-top:0;">
                                <el-button type="primary" @click ="associatorHanldeAdd">增加项目会员</el-button>
                                <!--
                                <el-button type="primary" @click ="memberHandleByOrgId(userPageNo)">增加项目成员</el-button>
                                <el-button type="info" @click ="memberHandleInProjectByOrgId(prouserCurrentPageNo)">项目内成员</el-button>
                                -->
                                <el-button type="danger" @click ="associatorHandledelete">删除项目会员</el-button><br>
                            </td>
                        </tr>
                        <tr v-for="(node, index) in proorgData">
                            <td class="imgtd" width="50">
                                <el-checkbox v-model="heheSelect[index]"
                                             :checked="node.hehe"
                                             :true-label="node.id"
                                             :false-label="false">
                                </el-checkbox>
                            </td>
                            <td class="f12">
                                <p><span class="b f14">{{ node.name }}</span></p>
                                <p>
                                    类型：{{ node.type | changeOrgType }} <el-divider direction="vertical"></el-divider>
                                    状态：{{ node.status | associatorStatus }}
                                </p>
                                <p>
                                    添加日期：{{ node.createdate }}
                                </p>
                            </td>
                            <td class="f12">
                                <p>
                                    联系人：{{ node.contact }} <el-divider direction="vertical"></el-divider>
                                    地址：{{ node.address }}
                                </p>
                                <p>
                                    固定电话：{{ node.contact_phone }} <el-divider direction="vertical"></el-divider>
                                    移动电话：{{ node.contact_mobile }}
                                </p>
                                <p>电子邮箱：{{ node.email }}</p>
                            </td>
                            <td>
                                <el-button icon="el-icon-user-solid"
                                           type="mini"
                                           @click="memberHandleByOrgId(node)">
                                    项目内成员
                                </el-button>
                            </td>
                        </tr>
                    </table>

                    <div class="block mt10 tr">
                        <el-pagination
                            mini
                            layout="sizes, prev, pager, next"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="proorgPageSize"
                            :total="proorgDataFromDB.length"
                            @current-change="handleProOrgPageChange"
                            @size-change="handleProOrgPageSizeChange">
                        </el-pagination>
                    </div>
                </div>
            </el-card><!-- /row -->

            <!--增加会员-->
            <el-dialog
                    title="会员列表"
                    :visible.sync="dialogVisible1"
                    width="600px">
                <el-card shadow="never">
                    <el-form label-width="70px" inline="true">
                        <el-form-item label="会员名称" style="margin-bottom:0;">
                            <el-input v-model="orgName"></el-input>
                        </el-form-item>

                        <el-form-item style="margin-bottom:0;">
                            <!--
                            <el-select v-model="orgType" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in orgTypes"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            -->
                            <el-button type="default" @click="associatorHanldeByNameType(orgCurrentPageNo)">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-card><!-- /row -->
                <br>

                <el-card shadow="never">
                    <div>
                        <el-button type="primary" @click ="addOrgToProject()">增加项目会员</el-button>
                        <el-button type="default" @click ="associatorHandleGoBack">取消</el-button>
                    </div>

                    <div class="mt10">
                        <el-table
                                ref="orgTable"
                                highlight-current-row
                                :data="orgData"
                                border
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                type="selection"
                                width="55">
                            </el-table-column>
                            <el-table-column
                                    label="会员信息">
                                <template scope="scope">
                                    <p class="b f14"> {{ scope.row.name }} </p>
                                    <p class="f12">
                                        联系人：{{ scope.row.contact }} <el-divider direction="vertical"></el-divider>
                                        邮箱：{{ scope.row.email }}
                                    </p>
                                    <p class="f12">
                                        类型：{{ scope.row.type | changeOrgType }} <el-divider direction="vertical"></el-divider>
                                        地址：{{ scope.row.address }}
                                    </p>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block mt10 tr">
                            <el-pagination
                                    mini
                                    layout="prev, pager, next"
                                    :page-size="orgPageSize"
                                    :total="orgDataFromDB.length"
                                    @current-change="handleOrgPageChange"
                                    @size-change="handleOrgPageSizeChange">
                            </el-pagination>
                        </div>
                    </div>
                </el-card><!-- /row -->
            </el-dialog>

            <!-- 用户信息 -->
            <el-dialog
                    :title="orgCurrent"
                    :visible.sync="dialogVisible"
                    width="540px">
                <div class="tc">
                    <el-transfer style="text-align: left; display: inline-block"
                                 v-model="userDataSelect"
                                 :titles="['未添加成员', '已添加成员']"
                                 :data="userDataFromDB"
                                 @change="addUserToProject">
                    </el-transfer>
                </div>
            </el-dialog>


        </div><!-- /app -->
    </div>
</div>
<div th:replace="lib :: javascript_box"></div>
<script> var id = '[[${id}]]'; </script>
<script th:src="@{/lib/console/project_org.js}"></script>
</body>
</html>
